<template>
  <!-- div.container>div.box>header.header+div.content  -->
  <div class="container">
    <!-- <div class="box">
      <header class="header">header</header>
      <div class="content">content</div>
    </div> -->
    <router-view></router-view>
    <footer class="footer" v-if="!$route.meta.hidden">
      <ul>
        <router-link to="/home" tag="li">
          <span class="iconfont icon-shouye"></span>
          <p>首页</p>
        </router-link>
        <router-link to="/kind" tag="li">
          <span class="iconfont icon-fenlei"></span>
          <p>分类</p>
        </router-link>
        <router-link to="/cart" tag="li">
          <span class="iconfont icon-gouwuche"></span>
          <p>购物车</p>
        </router-link>
        <router-link to="/user" tag="li">
          <span class="iconfont icon-My"></span>
          <p>我的</p>
        </router-link>
      </ul>
    </footer>
    <div class="tip">请将屏幕竖向浏览</div>
  </div>
</template>
<script>
export default {

}
</script>
<style lang="stylus">
html, body, .container
  height 100%
html
  font-size 26.6666666vw

@media all and (min-width 960px)
  html
    font-size 100px
body
  font-size 12px
.container
  display flex
  flex-direction column
  max-width 1080px
  magin 0 auto
  .box
    flex 1
    display flex
    flex-direction column
    overflow auto
    .header
      height 0.44rem
      background-color #ff6666
    .content
      flex 1
      overflow auto
      background-color #efefef
  .footer
    height 0.5rem
    background-color #efefef
    ul
      list-style none
      height 100%
      display flex
      margin 0
      padding 0
      li
        flex 1
        height 100%
        display flex
        flex-direction column
        justify-content center
        align-items center

        &.router-link-active
          color #f66
        span
          font-size 0.20rem
        p
          font-size 12px
          margin 0
          margin-top 5px
.tip
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background rgba(0, 0, 0, 0.5)
  color #ffffff
  font-size 30px
  font-weight bold
  display none
  justify-content center
  align-items center

@media all and (orientation landscape)
  .tip
    display flex
</style>
